<template>
    <div class="middle">
        <el-card shadow="hover">
            <div class="header">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="change">
                    <el-menu-item index="1">销售额</el-menu-item>
                    <el-menu-item index="2">访问量</el-menu-item>
                </el-menu>
                <section>
                    <!-- 按钮组 -->
                    <el-radio-group v-model="changeData" size="mini">
                        <el-radio-button label="今日"></el-radio-button>
                        <el-radio-button label="本周"></el-radio-button>
                        <el-radio-button label="本月"></el-radio-button>
                        <el-radio-button label="本年"></el-radio-button>
                    </el-radio-group>
                    <!-- 日期 -->
                    <el-date-picker v-model="dataString" type="daterange" align="right" unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </section>
            </div>

            <!-- 图形 -->
            <div class="content">
                <v-charts :options="options"></v-charts>
                <section class="right">
                    <p>排行榜</p>
                    <ul>
                        <li v-for="(item, index) in sortList" :key="index">
                            <span :class="index < 3 ? 'black index' : 'index'">{{ item.no }}</span>
                            <span>{{ item.name }}</span>
                            <span>{{ item.money }}</span>
                        </li>
                    </ul>
                </section>
            </div>
        </el-card>
    </div>
</template>

<script>
import reportData from '@/mixin/reportData'
export default {
    mixins: [reportData],
    mounted() {

    },
    methods: {
        change(index) {
            // console.log(index);
            this.activeIndex = index;
        }
    },
    data() {
        return {
            activeIndex: '1',//销售额index
            changeData: '今日',//日期选择
            dataString: '',//日期选择器绑定
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 1000 * 60 * 60 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },


        }
    },
    computed: {
        /* 图形vue-eCharts */
        options() {
            let obj = {
                title: {
                    text: '年度销售额',
                    textStyle: {
                        fontSize: '14px',
                        color: '#bbb',
                    },
                    top: 10,
                },
                xAxis: {
                    type: 'category',
                    data: this.orderFullYearAxis,
                    boundaryGap: true,
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                        }
                    },
                    boundaryGap: false,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                            color: "rgba(0, 0, 0, 0.15)",
                        },
                    },
                },
                series: [
                    {
                        type: 'bar',
                        data: this.orderFullYear,
                        barWidth: 30,
                    }
                ],
                grid: {
                    top: '15%',
                    left: 80,
                    right: 50,
                    bottom: 30,
                },
            }
            if (this.activeIndex == 1) {
                obj.title.text = '年度销售额'
                obj.xAxis.data = this.orderFullYearAxis
                obj.series[0].data = this.orderFullYear
            } else {
                obj.title.text = '用户访问量'
                obj.xAxis.data = this.userFullYearAxis
                obj.series[0].data = this.userFullYear
            }
            return obj;
        },
        sortList() {
            if (this.activeIndex == 1) {
                return this.orderRank
            } else {
                return this.userRank
            }
        }
    }
}
</script>

<style lang="scss">
.middle {
    margin-top: 20px;

    .el-card__header {
        border-bottom: none;
    }

    .el-card__body {
        padding-top: 0;

        .header {
            display: flex;
            position: relative;
            justify-content: flex-end;
            align-items: center;
            padding: 10px 10px;

            .el-menu {
                position: absolute;
                left: 20px;
                width: 100%;
            }

            section {
                background-color: red;
                width: 45%;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}

.content {
    height: 400px;
    display: flex;

    .echarts {
        flex: 3;
    }

    &>section {
        flex: 1;

        p {
            width: 100%;
            height: 40px;
            // background-color: red;
        }

        ul {
            width: 100%;
            height: 90%;

            // background-color: yellow;
            li {
                width: 100%;
                height: 55px;
                // background-color:pink;
                display: flex;
                justify-content: space-between;
                padding: 0 10px;
                .index {
                    width: 40px;
                    height: 40px;
                    // background-color: red;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 40px;
                }
                .black {
                    background-color: black;
                    color: white;
                }
                span:nth-child(2) {
                    width: 55%;
                    height: 100%;
                }
            }
        }
    }
}
</style>